<template>
  <view class="news-wrapper">
    <view class="title">最新资讯</view>
    <view class="article-list">
      <view
        class="article-item"
        v-for="(item, index) in dataList"
        :key="item.id"
        @click="onTargetDetail(item.id)"
      >
        <view class="name nowrap_ellipsis">{{ item.title }}</view>
        <view class="content nowrap_ellipsis">{{ item.brief }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "News",
  props: {
    dataList: Array,
  },
  data() {
    return {
      articleList: [
        {
          id: 1,
          title: "什么方法才能让成年人有效的学古筝？",
          time: "2020-05-05 18:58:56",
          count: 23,
          content:
            "很多人学习古筝，大部分对自己的期许和水平要求比较高，尤其是零基础的学生，在学习古筝上，就想三个月学会古筝曲xxx，一年考多少级，其实这样的追求和想法是没错的，但是时间久了就会对自己产生无形的压力，在平时产生“厌烦”的情绪。",
        },
        {
          id: 2,
          title: "什么方法才能让成年人有效的学古筝？",
          time: "2020-05-05 18:58:56",
          count: 23,
          content:
            "很多人学习古筝，大部分对自己的期许和水平要求比较高，尤其是零基础的学生，在学习古筝上，就想三个月学会古筝曲xxx，一年考多少级，其实这样的追求和想法是没错的，但是时间久了就会对自己产生无形的压力，在平时产生“厌烦”的情绪。",
        },
      ],
    };
  },
  watch: {},
  /**
   * 组件的方法列表
   * 更新属性和数据的方法与更新页面数据的方法类似
   */ methods: {
    // 跳转文章详情页
    onTargetDetail(articleId) {
      this.$navTo("pages/article/detail", { articleId });
    },
  },
};
</script>
<style lang="scss" scoped>
.news-wrapper {
  background-color: #fff;
  margin: 20rpx 0;
  padding: 0 20rpx;
  .title {
    margin-bottom: 10rpx;
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: bold;
    &::before {
      content: "";
      display: inline-block;
      width: 8rpx;
      height: 40rpx;
      background-color: rgba(164, 30, 20, 1);
      margin-right: 20rpx;
      border-radius: 8rpx;
      position: relative;
      top: 8rpx;
    }
  }
  .article-list {
    .article-item {
      padding: 20rpx 0rpx;
      border-bottom: 0.5px solid #eee;
      .name {
        font-size: 15px;
        font-weight: 700;
        color: #111;
        line-height: 21px;
      }
      .content {
        color: #777;
        font-size: 11px;
        min-height: 15px;
        margin-top: 1px;
      }
    }
  }
}
</style>
